import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { useSelector } from 'react-redux'
import { RootStateITF } from '@REDUXITF/index'
import { ManagementPlanStateITF } from '@REDUXITF/managementPlan'
import { HomeBannerItem } from '@COMPONENTS/Banner/HomeBanner'

import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './HomeBanner.module.scss'
interface Props {
  isPainManage?: boolean
  showLogin?: ()=> void;
}

const HomeBannerExtend: React.FC<Props> = ({ isPainManage, showLogin }) => {
  const language = 'zh'
  const { mainBannerEvents } = useSelector<RootStateITF, ManagementPlanStateITF>(state => state.managementPlan)
  const event = mainBannerEvents[0]
  const eventHandle = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_banner_extend.eventId, { isJoinPlan: isPainManage })
  }, [isPainManage])
  if (!Array.isArray(mainBannerEvents) || mainBannerEvents.length === 0) return null
  const containerStyle = isPainManage ? style.painManageContainer : style.mainContainer
  return (
    <View className={containerStyle}>
      <HomeBannerItem
        language={language}
        key={event.p8Id}
        data={event}
        eventHandle={eventHandle}
        bannerStyle={`${style.extendBannerItem} ${isPainManage ? style.extendBannerItemPain : ''}`}
        showLogin={showLogin}
        isAuthRedirect
      />
    </View>
  )
}

export default HomeBannerExtend
